import IconArrowLeft from "@/assets/svg/icon-arrow-left";
import IconArrowRight from "@/assets/svg/icon-arrow-right";
import React, { memo, useEffect, useRef, useState } from "react";
import ScrollView from "./style";

const index = memo((props) => {
  // 设置右边按钮显示
  const [isShowRbtn, changeIsShowRbtn] = useState(false);
  const [isShowLbtn, changeIsShowLbtn] = useState(false);
  // 获取按钮集合div的DOM
  const ContentDiv = useRef();
  useEffect(() => {
    // 获取DOM的可滚动宽度（总宽度）
    const scroll = ContentDiv.current.scrollWidth;
    // 获取DOM的宽度（可视的宽度）
    const client = ContentDiv.current.clientWidth;
    // 当可滚动宽度-可视宽度>0，说明DOM内容溢出，显示右边按钮
    changeIsShowRbtn(scroll - client > 0);
  },[props.children]);
  const [transX, changeTransX] = useState(0);
  const RbtnClick = () => {
    // 获取DOM的可滚动宽度（总宽度）
    const scroll = ContentDiv.current.scrollWidth;
    // 获取DOM的宽度（可视的宽度）
    const client = ContentDiv.current.clientWidth;
    changeTransX(-(scroll-client));
    changeIsShowRbtn(false);
    changeIsShowLbtn(true);
  };
  const LbtnClick = () => {
    // 获取DOM的可滚动宽度（总宽度）
    const scroll = ContentDiv.current.scrollWidth;
    // 获取DOM的宽度（可视的宽度）
    const client = ContentDiv.current.clientWidth;
    changeTransX(0);
    changeIsShowLbtn(false);
    changeIsShowRbtn(true);
  };
  return (
    <ScrollView transX={transX}>
      <div className="body">
        
        {isShowLbtn && (
          <div className="lbtn"  onClick={(e) => LbtnClick()}>
          <IconArrowLeft />
        </div>
        )}
        <span></span>
        {isShowRbtn && (
          <div className="rbtn" onClick={(e) => RbtnClick()}>
            <IconArrowRight />
          </div>
        )}

        <div ref={ContentDiv} className="main">
          {props.children}
        </div>
      </div>
    </ScrollView>
  );
});

export default index;
